<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="jquery.css" rel="stylesheet"/>
<title>无标题文档</title>
</head>
<body>
<p>jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：</p>
<p class="codex">$(&quot;#61dh a&quot;).css('color','#123456'); </p>
<p>//这里选择器‘$(&quot;#61dh a&quot;)’表示ID为‘#61dh’的元素下的所有链接。 </p>
<p><span class="codex">//.css(‘color’,'#123456');表示把颜色设为'#123456'</span></p>
<p>&nbsp;</p>
<p>如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：</p>
<p class="codex">var divcss = { </p>
<p class="codex"> background: '#EEE', </p>
<p class="codex"> width: '478px', </p>
<p class="codex"> margin: '10px 0 0', </p>
<p class="codex"> padding: '5px 10px', </p>
<p class="codex"> border: '1px solid #CCC' </p>
<p class="codex">}; </p>
<p class="codex">$(&quot;#result&quot;).css(divcss); </p>
<p>//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 </p>
<p>//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。<br />
</p>
<p>&nbsp;</p>
<p>另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：</p>
<p class="codex">$(&quot;#61dh a&quot;).css(&quot;color&quot;) </p>
<p>//和第一个例子相似，但是这里我们只传递一个参数(样式属性)<br />
</p>
<p>&nbsp;</p>
<p>最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$(&quot;a:hover&quot;)是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：</p>
<p class="codex">$(&quot;#61dh a&quot;).css('color','#123456'); </p>
<p class="codex"> $(&quot;#61dh a&quot;).hover(function(){ </p>
<p class="codex"> $(this).css('color','#999'); </p>
<p class="codex"> }, </p>
<p class="codex"> function(){ </p>
<p class="codex"> $(this).css('color','#123456'); </p>
<p class="codex">}); </p>
<p>//hover()方法的两个函数使用用逗号分隔<br />
</p>
<p>&nbsp;</p>
<p>你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用如何添加/移除CSS类一文提到的方法来改变鼠标划过的链接样式。</p>
<p></p>
</body>
</html>
